<template>
	<el-row class="news">
		<!-- 左边的订阅 -->
		<el-col :span="10">
			<p class="one">步骤1 MQTT+Topic</p>
			<el-row class="Subscribe">
				<el-button style="margin-left:-30px" id="startstart" type="info" :loading="load" @click="start">{{moqtNo}}</el-button>
				<el-button style="margin-left:40px" type="danger" @click="Stop" :disabled="disAbled">{{moqtOff}}</el-button>
				<el-col :span="20">
					<el-button  style="margin-left:30px;margin-top:20px;"type="primary" @click="addDingYue">添加订阅   topic</el-button>
				</el-col>
				<el-col :span="20">
				<ul >
					<li v-for="tag in dynamicTags">
					<el-tag  id="tag" :key="tag"  closable :disable-transitions="false"  :hit="true"   @close="handleClose(tag)">
					{{tag}}
				</el-tag></li>
				</ul>
				</el-col>
			</el-row>
		 
			<!-- //订阅弹框 -->
			<el-dialog  :visible.sync="dingYue">
			<el-form :model="form" :rules="rules" ref="form"  class="demo-ruleForm">
				 <el-form-item label="topic"  prop="desc">
				<el-input v-model="form.desc" type="text" auto-complete="off" style="width:60%"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dingYue = false">取 消</el-button>
				<el-button type="primary" @click="submitDing(form.desc)">确 定</el-button>
			</div>
			</el-dialog>
		</el-col>
		<!-- 发布 -->
	 <el-col :span="10">
	 	<p class="one" style="width:100%;">步骤2 Publish</p>
		<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="200px" class="demo-ruleForm">
		<el-form-item label="设备GRN：" prop="thingsGrn">
			<el-input v-model="ruleForm.thingsGrn"></el-input>
		</el-form-item>
		 <el-form-item label="topic：" prop="topic">
			<el-input v-model="ruleForm.topic"></el-input>
		</el-form-item>
		<el-form-item label="消息：" prop="message">
			<el-input type="textarea" v-model="ruleForm.message"></el-input>
		</el-form-item>
		<el-form-item label="qos：" prop="qos">
			<el-select v-model="form.name" placeholder="请选择" style="width:100%;">
				<el-option  :value="0">0</el-option>
				<el-option  :value="1">1</el-option>
			</el-select>
		</el-form-item>
		<el-form-item>
			<el-button @click="resetForm(ruleForm)">重置</el-button>
			<el-button type="primary" @click="submitForm('ruleForm')">发送</el-button>
		</el-form-item>
		</el-form>
		<el-col :span="24" style="margin-top: 20px;margin-left:40px;width:120%; display:none">
		<hr class="hr1" />  
		</el-col>
		<!-- 表格数据 -->
			<el-col  style="margin-left:40px;width:120%;margin-top:40px;">
			<p class="one" style="width:100%;">步骤3 Mseeages</p>
			<el-table
				:data="newData"
				:show-header="true"
				border
				v-loading="listLoading"             
				:header-cell-class-name="tableheaderClassName"
				:row-class-name="tableRowClassName">
				<el-table-column
				prop="date"
				label="日期"
				width="180">
				</el-table-column>
				<el-table-column
				prop="topic"
				label="topic"
				width="180">
				</el-table-column>
				<el-table-column
				prop="test"
				label="消息">
				</el-table-column>
			</el-table>
			</el-col>
		</el-col>
		
	</el-row>
</template>
<script>
import util from '../../common/js/date.js';
import {  addUser } from '../../api/api.js';
// import { getUserListPage, removeUser, batchRemoveUser, editUser, addUser } from '../../api/apiGetPost.js';
export default {
	name:'news',
	data() {
		return {
			moqtNo:'连接MQTT',
			moqtOff:'断开MQTT',
			client:null,
			cont:false,
			scribe:false,
			load:false,
			disAbled:true,
			mews:{
				username:'iotUser',
				password:'Iot+305',
				host:'192.168.1.189:8088',
			},
			filters: {
				name:'',
			},
			dingtopic:null,
			page: 1,
			total: 0,
			biao:"消息测试",
			listLoading:false,
			dingYue:false,
			dynamicTags: [],
			form: {        
				desc: '',
			},
			ruleForm: {
				api:'消息测试',
				thingsGrn: '',
				message: '',
				topic:'',
				qos:'',
				tenantId:'wangbin'
			},
			rules: {
				GRN: [
					{ required: true, message: '请输入GRN', trigger: 'blur' },
					{ min: 3, max: 30, message: '长度在 3 到 5 个字符', trigger: 'blur' }
				],
				topic: [
					{ required: true, message: '请输入topic', trigger: 'blur' },
					{ min: 3, max: 15, message: '长度在 3 到 5 个字符', trigger: 'blur' }
				],
				test: [
					{ required: true, message: '请填写消息', trigger: 'blur' },
					{ min: 1, max: 30, message: '长度在 1 到 30 个字符', trigger: 'blur' }
				],
				desc: [
					{ required: true, message: '请输入topic', trigger: 'blur' },
					{ min: 3, max: 15, message: '长度在 3 到 5 个字符', trigger: 'blur' }
				],
			},
			newData: [ ] 
		};
	},
	methods: {
		start(){
			var client;
			var _self=this;    
			client = mqtt.connect('ws://' + this.mews.username + ':' + this.mews.password + '@' + this.mews.host+ '/mqtt');
			console.log(client)
			this.client=client;
			client.on('connect', function () {
				_self.$message({
					message: '连接成功',
					type: 'success'
				});
				_self.cont=true;
				_self.load=true;
				_self.disAbled=false;
				_self.moqtNo='已连接';
				_self.moqtOff='断开MQTT';
			});
			client.on("error", function () {
				_self.$message({
					message: '连接失败',
					type: 'danger'
				});
			});
			client.on("message", function (topic, payload) {
				var data={
					date:new Date(),
					topic:'',
					test:'',
				};
				var time1 = data.date.getTime();
				data.date = util(time1)
				data.topic=topic;
				data.test=payload.toString();
				console.log(data);
				_self.newData.push(data);
			});
		},
		Stop(){
			this.client.end();
			this.client='';
			this.$message({
				message: '断开连接',
				type: 'danger'
			});
			this.load=false;
			this.cont=false;
			this.disAbled=true;
			this.moqtOff='已断开';
			this.moqtNo='连接MQTT';
		},
		// 消息发送
		submitForm(formName) {
			if(this.scribe){
				this.$refs[formName].validate((valid) => {
					if (valid) {       
						this.addLoading = true;
						console.log(this.dynamicTags);
						let para = Object.assign({}, this.ruleForm);   
						console.log(para);
						if(!this.disAbled){
							addUser(para).then(() => {
								this.addLoading = false;
								this.$message({
									message: '发布成功',
									type: 'success'
								});
								// this.$refs['ruleForm'].resetFields();
								this.addLoading = false;
							});
						}else{
							this.$message({
								message: '请先连接MQTT',
								type: 'success'
							});
						}
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			}else{
				this.$message({
					message: '请先连接在订阅',
					type: 'success'
				});
			}
		},
		resetForm() {
			this.ruleForm.thingsGrn= '';
			this.ruleForm.message= '';
			this.ruleForm.topic='';
			this.ruleForm.qos='';
		},
		// 订阅
		addDingYue(){
			if(this.cont){
				this.dingYue=true;
				this.scribe=true;
			}else{
				this.$message({
					message: '请先连接MQTT',
					type: 'success'
				});
			}
		},
		// 确认订阅
		submitDing(row){
			this.dingYue=false;
			this.client.subscribe(row);
			this.dynamicTags.push(row);
			this.$message({
				message: '订阅topic'+row,
				type: 'success'
			});
			this.ruleForm.topic=row;
			this.form.desc='';
		},
		handleClose(tag) {
			this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
			this.client.unsubscribe(tag);
			this.client.end();
			this.$message({
				message: '退订topic'+tag,
				type: 'success'
			});
		},
		tableRowClassName({rowIndex}) {
			if (rowIndex % 2==0) {
				return 'success-row';
			} else if (rowIndex % 2 !==0) {
				return 'warning-row';
			}
			return '';
		},
		tableheaderClassName() {
			return "table-head-th";
		},
	},
	mounted() {  
	}
}

</script>
<style scoped>
	.news{
	right: 0px;
	}
	.news .Subscribe ul>li{
	list-style-type:none;  
	padding-top: 6px;
	padding-bottom: 6px;
	width: 75%;
	border: 1px solid  #666;
	border-radius:10px; 
	margin: 0 auto;
	margin-top: 20px;
	/*background-color: #4db6ac;*/
	position: relative;
	} 
	.news .Subscribe {
	margin-left: 0%;
	text-align: center;
	}
	.news .Subscribe p {
	padding-top: 6px;
	padding-bottom: 6px;
	width: 40%;
	margin: 0 auto;
	margin-left: 35%;
	margin-top: 20px;
	border: 1px solid  #666666;
	/*border-radius: 8%;*/
	}
	.news .Subscribe ul>li #tag{
	background: #fff;
	padding: 0 10px;
	height: 34px;
	line-height: 30px;
	font-size: 16px;
	border-radius: 4px;
	color: #000;
	box-sizing: border-box;
	border: 0px solid rgba(64,158,255,.2)
	}
	.news .jie_new{
	margin: 0 auto;
	margin-bottom: 50px;
	}
	.el-tag .el-icon-close{
	background:#9e9e9e;
	right: 30px;
	}
	.news .one{
	font-size: 24px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    width: 88%;
    background-color: rgb(229, 230, 234);
    margin-top: 0px;
	}
</style>